import React, { Component } from 'react'
import Hrader from '../head/hrader'
import { withRouter } from 'react-router'
import './mySetMessage.less'
import { DatePicker, Space } from 'antd';
import axios from 'axios'
import Alert from '../alert/alert'
import { connect } from 'react-redux';
import fun from '../../store/action/index'
class MySetMessage extends Component {
    constructor() {
        super()
        this.state = {
            headtitle: { title: '', path: '/myMessage', age: '保存' },
            value: '',//与默认值进行对比的  更改值
            acquiescentvalue: '',//你默认的 传递过来的  值
            sex: '',//性别
            // sexnowindex: 0,//性别的下标
            month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            monthnow: '',//月下标
            date: [],// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
            datenow: "",//日下标
            user_birthday: '',//生日
            alerttitle: '',//弹层信息
            alertFlag: false,//弹层状态
        }
    }
    render() {
        let { acquiescentvalue, headtitle, sex, monthnow, datenow, user_birthday } = this.state
        // console.log(acquiescentvalue);
        return (
            <div className="myMessage_box">
                <div className="myMessage_header">
                    <Hrader title={this.state.headtitle} subBtn={this.subBtn} />
                </div>
                <div className="myMessage_body">
                    {/* 默认的 */}
                    {headtitle.title !== '性别' && headtitle.title !== '生日' ?
                        <div className="myMessage_contents">
                            <input type="text" name="" id="myMessage_settitle" maxLength={headtitle.title === '手机号码' ? 11 : null}
                                value={this.state.value} onChange={(e) => { this.onChanges(e.target.value) }} />

                        </div> : null}
                    {/* 性别 */}
                    {headtitle.title === '性别' ?
                        <div className="myMessage_contents">
                            <div onClick={() => { this.setState({ sex: '0', value: '0' }) }}><p>女</p>
                                <span className={`${sex === '0' ? 'iconfont icon-dui1' : null}`}></span>
                            </div>
                            <div onClick={() => { this.setState({ sex: '1', value: '1' }) }}><p>男</p>
                                <span className={`${sex === '1' ? 'iconfont icon-dui1' : null}`}></span>
                            </div>
                        </div> : null}

                    {/* 判断是否可更改生日 */}
                    {headtitle.title === '生日' ? <div className="myMessage_tishi"><span></span>
                        {!user_birthday ? <div>*每年只可变更一次</div> : <div>*每年只可变更一次，暂不可变更生日</div>}</div> :
                        <div className="myMessage_prompt">修改您的<span>{headtitle.title}</span></div>}
                    {/* 可更改生日时渲染 */}

                    {headtitle.title === '生日' ? <>{user_birthday ? null : <div className="myMessage_birthday">
                        {/* 月 */}
                        <div>
                            <div>请选择月份</div>
                            <div>
                                <select name="" className="select" onChange={(e) => { this.setmobth(e.target.value) }}>

                                    {this.state.month.map((item, index) => {
                                        return <option value={item} key={item} className="selected">{item}</option>
                                    })}
                                </select>
                            </div>
                        </div>
                        {/* 日 */}

                        {monthnow ? <div>
                            <div>请选择日期</div>
                            <div>
                                <select name="" className="select" onChange={(e) => { this.setState({ datenow: e.target.value }) }}>
                                    {this.state.date.map((item, index) => {
                                        return <option value={item} key={item} className="selected">{item}</option>
                                    })}
                                </select>
                            </div></div>
                            : null}
                    </div>}</> : null}
                    {/* 生日 */}
                    {headtitle.title === '生日' ?
                        <div>您的生日{user_birthday ? <b>{user_birthday}</b> :
                            <>  {monthnow ? <b> {monthnow} 月</b> : null}
                                {datenow ? <b> {datenow} 日</b> : null}</>}
                        </div>
                        : null}
                </div>
                {/* 弹层 */}
                {this.state.alertFlag ? <div className="my_alert">
                    <Alert title={this.state.alerttitle} alertX={this.alertX} alertSub={this.alertSub}></Alert>
                </div> : null}
            </div >
        )
    }
    //日期选择
    setmobth = (e) => {
        if (e === '1' || e === '3' || e === '5' || e === '7' || e === '8' || e === '10' || e === '12') {
            let date = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
            this.setState({ monthnow: e, date })
        } else if (e === '2') {
            let date = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]
            this.setState({ monthnow: e, date })
        } else {
            let date = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
            this.setState({ monthnow: e, date })
        }
    }


    //监听保存按钮是否可以点击
    onChanges = (a) => {
        let { headtitle } = this.state
        if (headtitle.title === "手机号码") {
            const result = /^\d+$/.test(a)//纯数字
            if (result) {
                this.setState({ value: a })
            }
        } else {
            this.setState({ value: a })
        }
    }
    // 保存按钮
    subBtn = () => {
        // console.log(this.state.value);
        // console.log(this.props.location.user_data.user_id);
        let { index, user_data } = this.props.location
        if (index === 3) {
            if (this.state.user_birthday) {
                // 不可修改时 直接跳转
                this.props.history.push('/myMessage')
            } else {
                // 可修改生日
                let str = this.state.monthnow + '月' + this.state.datenow + '月'
                this.AXIOS(user_data.user_id, index, str);
            }
        } else {
            // console.log(user_data.user_id, index, this.state.value);
            // this.AXIOS(user_data.user_id, index, this.state.value);
            let { headtitle, value } = this.state
            console.log(headtitle);
            if (headtitle.title === "手机号码") {
                let str = /^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/;
                let flag = str.test(value)
                if (flag) {
                    this.AXIOS(user_data.user_id, index, this.state.value);
                } else {
                    console.log('---------------错误-------');
                    this.setState({ alertFlag: true, alerttitle: '手机、电话号码输入有误' })
                }
            } else if (headtitle.title === "邮箱") {
                let str = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                let flag = str.test(value)
                if (flag) {
                    this.AXIOS(user_data.user_id, index, this.state.value);
                } else {
                    console.log('---------------错误-------');
                    this.setState({ alertFlag: true, alerttitle: '邮箱输入错误' })
                }
            } else {
                this.AXIOS(user_data.user_id, index, this.state.value);
            }
        }
    }

    AXIOS(user_id, index, newMess) {
        axios({
            method: 'post',
            url: '/api/front_end/changeUserMess',
            data: {
                user_id,    //  user_id         用户id
                index,      // index           下标
                newMess,    // newMess         新的信息
            }
        }).then(res => {
            console.log(res.data);
            if (res.data.code === '01') {
                this.props.setNav(res.data.data)
                // console.log(this.props);
                // console.log(res.data.data);
                this.props.history.push('/myMessage')
            }
        })
    }
    componentDidMount() {
        let { index, user_data } = this.props.location
        console.log(this.props.location);
        let title = null;
        if (index === 1) {
            title = user_data.user_name
        } else if (index === 2) {
            title = user_data.user_sex
        } else if (index === 3) {
            title = user_data.user_birthday
        } else if (index === 4) {
            title = user_data.user_phone
        } else if (index === 5) {
            title = user_data.user_email
        } else if (index === 6) {
            title = user_data.user_name
        }
        // console.log(typeof user_data.user_sex);
        this.setState({
            headtitle: { title: this.props.location.state.title, path: '/myMessage', age: '保存' },
            acquiescentvalue: title,
            value: title,
            sex: user_data.user_sex,
            user_birthday: user_data.user_birthday
        })
        console.log(this.props.location);
    }
    //关闭弹层 
    alertX = () => {
        this.setState({ alertFlag: false })
    }
    //弹层确认
    alertSub = () => {
        console.log('确认');
        this.setState({ alertFlag: false })
    }
}
export default connect(state => state.Login, fun.loginAction)(withRouter(MySetMessage))